<template>
  <div class='aui-card--fill scroll-box card-box'>
    <div class='pane-shell'>
      <el-form :model="dataForm"
               v-loading="dataListLoading"
               ref="dataForm"
               label-position="left"
               @keyup.enter.native="dataFormSubmitHandle()"
               label-width="145px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="页签logo"
                          prop="webTab"
                          :rules="required()">
              <file-upload reg=".(png|jpeg|jpg)$"
                           ref="fileUpload"
                           accept=".jpeg,.jpg,.png"
                           title="上传图片"
                           :limit="1"
                           :paramData="{ bucketName: 'logo-deploy/images' }"
                           action="/springbootApi/system/oss/upload"
                           uploadType="picture-card"
                           @success="successImgLoad"
                           @remove="handleImgRemove" />
              <div>建议尺寸为128*128</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录页左侧logo"
                          prop="loginLogoLeft"
                          :rules="required()">
              <file-upload reg=".(png|jpeg|jpg)$"
                           ref="fileUpload1"
                           accept=".jpeg,.jpg,.png"
                           title="上传图片"
                           :limit="1"
                           :paramData="{ bucketName: 'logo-deploy/images' }"
                           action="/springbootApi/system/oss/upload"
                           uploadType="picture-card"
                           @success="successImgLoad1"
                           @remove="handleImgRemove1" />
              <div>建议尺寸为401*113</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录页右侧logo"
                          prop="loginLogoRight"
                          :rules="required()">
              <file-upload reg=".(png|jpeg|jpg)$"
                           ref="fileUpload2"
                           accept=".jpeg,.jpg,.png"
                           title="上传图片"
                           :limit="1"
                           :paramData="{ bucketName: 'logo-deploy/images' }"
                           action="/springbootApi/system/oss/upload"
                           uploadType="picture-card"
                           @success="successImgLoad2"
                           @remove="handleImgRemove2" />
              <div>建议尺寸为251*85</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单栏logo"
                          prop="homeLogo"
                          :rules="required()">
              <file-upload reg=".(png|jpeg|jpg)$"
                           ref="fileUpload3"
                           accept=".jpeg,.jpg,.png"
                           title="上传图片"
                           :limit="1"
                           :paramData="{ bucketName: 'logo-deploy/images' }"
                           action="/springbootApi/system/oss/upload"
                           uploadType="picture-card"
                           @success="successImgLoad3"
                           @remove="handleImgRemove3" />
              <div>建议尺寸为360*142</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="loginRightName2"
                          label="登录页系统名称(en)"
                          :rules="stringRule(true, 1, 50)">
              <el-input v-model.trim="dataForm.loginRightName2"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="loginRightName1"
                          label="登录页系统名称(ch)"
                          :rules="stringRule()">
              <el-input v-model.trim="dataForm.loginRightName1"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="homeLogoName"
                          label="菜单栏名称"
                          :rules="stringRule()">
              <el-input v-model.trim="dataForm.homeLogoName"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="header">
        <el-button type="primary"
                   @click="dataFormSubmitHandle">确认修改</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import debounce from 'lodash/debounce'
import fileUpload from '@/components/file-upload/file-upload'
export default {
  mixins: [mixinViewModule, minFormValidate],
  name: '',
  data () {
    return {
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        deleteImgURL: '/system/oss/delete',
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      imgUrl: [],
      imgUrl1: [],
      imgUrl2: [],
      imgUrl3: [],
      dataForm: {
        webTab: '',
        loginLogoLeft: '',
        loginLogoRight: '',
        homeLogo: '',
        loginRightName1: '',
        loginRightName2: '',
        homeLogoName: ''
      }
    }
  },
  components: {
    fileUpload
  },
  computed: {
  },
  mounted () {
    this.rests = []
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.getData({
        url: '/tb/LogoSettingController/getLogo'
      }).then((res) => {
        if (res.code !== 0) {
          return
        }
        this.dataForm = res.data ? res.data : this.dataForm
        let list = []
        list.push({
          name: res.data.webTab,
          url: `${res.data.webTab}`
        })
        if (res.data.webTab) {
          this.imgUrl.push(list[0].name)
          if (this.$refs.fileUpload) {
            this.$refs.fileUpload.init(list)
          }
        }
        let list1 = []
        list1.push({
          name: res.data.loginLogoLeft,
          url: `${res.data.loginLogoLeft}`
        })
        if (res.data.loginLogoLeft) {
          this.imgUrl.push(list1[0].name)
          if (this.$refs.fileUpload1) {
            this.$refs.fileUpload1.init(list1)
          }
        }
        let list2 = []
        list2.push({
          name: res.data.loginLogoRight,
          url: `${res.data.loginLogoRight}`
        })
        if (res.data.loginLogoRight) {
          this.imgUrl.push(list2[0].name)
          if (this.$refs.fileUpload2) {
            this.$refs.fileUpload2.init(list2)
          }
        }
        let list3 = []
        list3.push({
          name: res.data.homeLogo,
          url: `${res.data.homeLogo}`
        })
        if (res.data.homeLogo) {
          this.imgUrl.push(list3[0].name)
          if (this.$refs.fileUpload3) {
            this.$refs.fileUpload3.init(list3)
          }
        }
      })
    },
    // 上传图片
    successImgLoad (name, url) {
      this.dataForm.webTab = url
      this.imgUrl.push(url)
    },
    // 删除图片
    handleImgRemove (url) {
      // this.deleteData({
      //   url: this.mixinViewModuleOptions.deleteImgURL,
      //   paramData: { files: url.url },
      //   isLoading: false
      // })
      this.dataForm.webTab = ''
    },
    // 上传图片
    successImgLoad1 (name, url) {
      this.dataForm.loginLogoLeft = url
      this.imgUrl1.push(url)
    },
    // 删除图片
    handleImgRemove1 (url) {
      // this.deleteData({
      //   url: this.mixinViewModuleOptions.deleteImgURL,
      //   paramData: { files: url.url },
      //   isLoading: false
      // })
      this.dataForm.loginLogoLeft = ''
    },
    // 上传图片
    successImgLoad2 (name, url) {
      this.dataForm.loginLogoRight = url
      this.imgUrl2.push(url)
    },
    // 删除图片
    handleImgRemove2 (url) {
      // this.deleteData({
      //   url: this.mixinViewModuleOptions.deleteImgURL,
      //   paramData: { files: url.url },
      //   isLoading: false
      // })
      this.dataForm.loginLogoRight = ''
    },
    // 上传图片
    successImgLoad3 (name, url) {
      this.dataForm.homeLogo = url
      this.imgUrl3.push(url)
    },
    // 删除图片
    handleImgRemove3 (url) {
      // this.deleteData({
      //   url: this.mixinViewModuleOptions.deleteImgURL,
      //   paramData: { files: url.url },
      //   isLoading: false
      // })
      this.dataForm.homeLogo = ''
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.postData({ url: '/tb/LogoSettingController/updateLogo' }).then(res => {
            if (res.code !== 0) {
              return false
            }
            this.dataForm = {}
            this.getInfo()
            this.$message.success('修改成功')
          })
        }
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  text-align: right;
  margin-bottom: 20px;
}
</style>
